<script setup>
import {computed, ref} from 'vue';
import {useUserStore} from "@/store/sys/user.js";
import {renderIcon, tree2MenuItems} from "@/utils/index.js";
import {useRoute, useRouter} from "vue-router";
import {ICONS} from "@/common/constant.js";
import {useAuthStore} from "@/store/sys/auth.js";
import {homeRouterName, loginRouterName, profileRouterName} from "@/router/routes.js";
import ThemeSwitch from "../components/theme-switch.vue";
import Logo from '@/assets/logo.png'
import {useTabStore} from "@/store/common/tab.js";

const userStore = useUserStore();
const authStore = useAuthStore();
const tabStore = useTabStore()
const route = useRoute()
const router = useRouter();

const menuOptions = computed(() => {
  return tree2MenuItems(userStore.getMenuTree);
})

const collapsed = ref(false)

const menuSelected = (key, item) => {
  router.push({name: key})
  tabStore.pushTab({
    name: item.key,
    tab: item.label,
  })
}

const dropDownOptions = ref([
  {
    key: 'profile',
    label: '个人中心',
    icon: () => renderIcon(ICONS.UserOutlined)
  },
  {
    type: 'divider'
  },
  {
    key: 'logout',
    label: '退出登录',
    icon: () => renderIcon(ICONS.LogoutOutlined)
  }
])

const onDropdownSelected = (key) => {
  if (key === 'logout') {
    userStore.$reset()
    authStore.$reset()
    router.push({name: loginRouterName})
  }
  if (key === 'profile') {
    router.push({name: profileRouterName})
  }
}

const onTabClose = (name) => {
  const index = tabStore.getIndex(name)
  tabStore.removeTab(index)
  if (index === 0) {
    router.replace({name: homeRouterName})
  } else {
    router.replace({name: tabStore.getPrevName(index)})
  }
}

const tabSelected = (name) => {
  router.replace({name})
}

</script>

<template>
  <n-layout class="h-screen" content-class="flex flex-col">
    <n-layout-header class="h-16 flex items-center px-7 py-2" bordered embedded>
      <n-space justify="space-between" align="center" class="w-full">
        <n-space align="center">
          <n-button text @click="$router.push({name: 'home'})">
            <n-image :src="Logo" width="32" height="32" preview-disabled/>
          </n-button>
          <n-text size="large" strong>Admin Liberty</n-text>
          <theme-switch/>
        </n-space>
        <n-dropdown :options="dropDownOptions" @select="onDropdownSelected">
          <n-avatar
              round
              size="medium"
              src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"
          />
        </n-dropdown>
      </n-space>
    </n-layout-header>
    <n-layout has-sider class="flex-grow" embedded>
      <n-layout-sider
          :native-scrollbar="false"
          content-class="flex flex-col"
          bordered
          collapse-mode="width"
          show-trigger="arrow-circle"
          @update-collapsed="val => collapsed = val">
        <n-menu
            :value="route.name"
            @update-value="menuSelected"
            :collapsed-icon-size="22"
            class="flex-grow"
            :collapsed="collapsed"
            :options="menuOptions"
        />
      </n-layout-sider>
      <n-layout-content content-class="px-6 pb-6 pt-2" :native-scrollbar="false">
        <n-space vertical>
          <n-tabs
              :value="route.name"
              closable
              size="small"
              type="card"
              :bar-width="30"
              @close="onTabClose"
              @update:value="tabSelected">
            <n-tab-pane
                :key="homeRouterName"
                tab="首页"
                :closable="false"
                :name="homeRouterName">
            </n-tab-pane>
            <n-tab-pane
                v-for="panel in tabStore.panels"
                :key="panel.name"
                :tab="panel.tab"
                :name="panel.name">
            </n-tab-pane>
          </n-tabs>
          <router-view/>
        </n-space>
      </n-layout-content>
    </n-layout>
  </n-layout>
</template>

<style scoped>

</style>
